<template>
  <div class="main-tradebox">
    <div class="main-container">
      <div class="gc_main">
        <div class="container cc_main">
          <!-- 标题栏 -->
          <div class="top_title">
            <h3 class="font-24 font-bold">填写申请资料</h3>
            <p class="font-14">请按示例要求上传认证资料，并确保真实性，否则您将无法通过或被限制广告权限申请</p>
          </div>
          <div class="progs">
            <el-steps :active="4" align-center>
              <el-step title="提交申请" :description="this.shopCoin"></el-step>
              <el-step title="发布广告" description="提交之后即可发布广告"></el-step>
              <el-step title="等待审核" description="两个工作日内审核"></el-step>
              <el-step title="审核通过" description="成为加V用户"></el-step>
            </el-steps>
          </div>
          <!-- 内容部分 -->
          <div class="apform_box">
            <div class="basics">
              <h2 class="form_title">基本信息</h2>
              <div class="form_box">
                <el-form ref="form" :model="formData" label-width="80px" :label-position="labelPosition" size="mini">
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="姓名">
                            <el-input v-model.trim="formData.username"  placeholder="请输入本人姓名" :disabled="true"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="电话">
                            <el-input v-model.trim="formData.tel" placeholder="请输入本人电话" clearable maxlength="11"
                              
                            ></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="微信">
                            <el-input v-model.trim="formData.wechat" placeholder="请输入本人微信" clearable maxlength="30"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="邮箱">
                            <el-input v-model.trim="formData.email" placeholder="请输入本人邮箱" clearable type="email" maxlength="30"
                              
                            ></el-input>
                          </el-form-item>
                        </div>
                      </el-col>

                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="紧急联系人姓名">
                            <el-input v-model.trim="formData.urgentusername" placeholder="请输入紧急联系人姓名" clearable maxlength="15"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="紧急联系人电话">
                            <el-input v-model.trim="formData.urgenttel" placeholder="请输入紧急联系人电话" clearable maxlength="11"
                            
                            ></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="与本人关系">
                            <el-select v-model.trim="formData.relationship" placeholder="请选择与本人关系">
                              <el-option label="亲人" value="亲人"></el-option>
                              <el-option label="同事" value="同事"></el-option>
                              <el-option label="朋友" value="朋友"></el-option>
                              <el-option label="其它" value="其它"></el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                      </el-col>
                  </el-row>  
                    <el-form-item label="常住地址">
                      <el-input v-model="formData.address"  placeholder="请输入您本人的常住地址" class="dress" clearable maxlength="30"></el-input>
                    </el-form-item>
                  </el-form>
                  <div class="tips">
                    <p>电话：用于工作人员处理日常申诉订单与您快速核实信息，请务必保持该电话畅通</p>
                    <p>微信：用于视频核实本人身份以及认证</p>
                    <p>紧急联系人与常住地址：用于进一步核实广告方KYC信息，确保交易更安全</p>
                  </div>
              </div>
            </div>
            <!-- 身份证明 -->
            <div class="basics two_card">
              <h2 class="form_title">身份证明</h2>
              <div class="form_box">
                <el-form ref="form" :model="formData" label-width="80px" :label-position="labelPosition" size="mini">
                  <div class="hkb">
                  <div class="img_toptip">
                    <p>请上传手持身份证照片</p>
                  </div>
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="card_img">
                          <img src="../../assets/images/trade/a12.jpg" alt="">
                          <div class="img_tips">
                            <p>范图示例</p>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="upbox">
                          <div
                            element-loading-background="rgba(0, 0, 0, 0.4)"
                            v-loading='showLoading_1'
                            class="p-rel upload-zone"
                          >
                            <input
                              class="upload-input abs-vh-center"
                              type="file"
                              @change="uploadId('1',$event)"
                              value=""
                              accept="image/png,image/gif,image/jpeg"
                            />
                            <button
                              v-show="!hideUploadBtn_1"
                              class="btn-inline abs-vh-center btn-large btn-danger"
                            >
                            </button>
                            <img
                              class="image-preview"
                              :src="formData.idcard"
                              alt=""
                            >
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="10">
                        <div class="grid-content bg-purple up_tips">
                          <p>* 拍摄时,<em>手持本人身份证正面，将持证的手臂和上半身整个拍进照片</em>,脸部、身份证上所有信息清晰且不能被遮挡</p>
                          <p>* 仅支持 .jpg /.jpeg /.png格式，最大不超过10M</p>
                        </div>
                      </el-col>
                  </el-row>
                  </div>
                  <div class="hkb">
                    <div class="img_toptip">
                    <p>请上传户口本照片</p>
                  </div>
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="card_img">
                          <img src="../../assets/images/trade/a13.jpg" alt="">
                          <div class="img_tips">
                            <p>范图示例</p>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="upbox">
                          <div
                              element-loading-background="rgba(0, 0, 0, 0.4)"
                              v-loading='showLoading_2'
                              class="p-rel upload-zone"
                            >
                              <input
                                class="upload-input abs-vh-center"
                                type="file"
                                accept="image/png,image/gif,image/jpeg"
                                @change="uploadId('2',$event)"
                                value=""
                              />
                              <button
                                v-show="!hideUploadBtn_2"
                                class="btn-inline abs-vh-center btn-large btn-danger"
                              >
                              </button>
                              <img
                                class="image-preview"
                                :src="formData.accountbook"
                                alt=""
                              >
                            </div>
                        </div>
                      </el-col>
                      <el-col :span="10">
                        <div class="grid-content bg-purple up_tips">
                          <p>* 户口本需要上传，<em>本人信息页原件</em>，请确保上传的图片无遮挡且清晰可见、无反光</p>
                          <p>* 仅支持 .jpg /.jpeg /.png格式，最大不超过10M</p>
                        </div>
                      </el-col>
                  </el-row>
                  </div>
                  </el-form>
              </div>
            </div>
            <!-- 地址证明 -->
            <div class="basics two_card">
              <h2 class="form_title">地址证明</h2>
              <div class="form_box">
                <el-form ref="form" :model="formData" label-width="80px" :label-position="labelPosition" size="mini">
                  <div class="img_toptip">
                    <p>请上传房产证/租房合同、水电费清单(三选一)</p>
                  </div>
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="card_img">
                          <img src="../../assets/images/trade/a11.jpg" alt="">
                          <div class="img_tips">
                            <p>范图示例</p>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="upbox">
                          <div
                              element-loading-background="rgba(0, 0, 0, 0.4)"
                              v-loading='showLoading_3'
                              class="p-rel upload-zone"
                            >
                              <input
                                class="upload-input abs-vh-center"
                                type="file"
                                accept="image/png,image/gif,image/jpeg"
                                @change="uploadId('3',$event)"
                                value=""
                              />
                              <button
                                v-show="!hideUploadBtn_3"
                                class="btn-inline abs-vh-center btn-large btn-danger"
                              >
                              </button>
                              <img
                                :style="defaultImg_3"
                                class="image-preview"
                                :src="formData.utilityfee"
                                alt=""
                              >
                            </div>
                        </div>
                      </el-col>
                      <el-col :span="10">
                        <div class="grid-content bg-purple up_tips">
                          <p>* 房产证、租房合同、水电费清单是为了确保您的地址信息真实有效；<em>证件中地址如与基本信息中所填常住地址不同，我们会要求您说明原因</em></p>
                          <p>* 房产证需可见<em>房主姓名、房产地址及填发单位盖章；</em>租房合同可见租房人姓名、租房地址、业主盖章及双方身份证号；水电费清单需最近日期并可见
                            缴费地址,请确保上传的图片无遮挡且清晰可见、无反光。</p>
                          <p>* 仅支持 .jpg /.jpeg /.png格式，最大不超过10M</p>
                        </div>
                      </el-col>
                  </el-row>
                  </el-form>
                
              </div>
            </div>

            <!-- btn -->
            <div class="btnbox">
                <el-checkbox v-model="checked">同意冻结 <em>{{shopAplyInfo.number||'---'}} {{shopAplyInfo.coin||'USDT'}} </em> 作为广告方保证金</el-checkbox>
                <el-checkbox v-model="checked">我已阅读并同意 <em>《广告发布方协议》</em></el-checkbox>
                <el-button type="primary" :disabled="!checked" @click="Formaddmerchant()">立即申请</el-button>
            </div>
          </div>
          
        </div>
        
        
      </div>
    </div>
    <!-- 购买弹窗 -->

  </div>
</template>

<script>
import axios from "axios";
import myStorage from '@/assets/js/myStorage';
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
     defaultImg_3: '',
      checked: false,
      labelPosition: 'top',
      formData: {
        username: '',
        tel: '',
        wechat: '',
        email: '',
        urgentusername: '',
        urgenttel:'',
        relationship: '',
        address: '',
        idcard: '',
        accountbook: '',
        utilityfee: '',
      },
      hideUploadBtn_1: false,
      hideUploadBtn_2: false,
      hideUploadBtn_3: false,
      showLoading_1: false,
      showLoading_2: false,
      showLoading_3: false,
      shopAplyInfo:{},
      shopCoin:'',
    }
  },        
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    this.getmerchantservices();
    this.getuserinfo();
  },
  methods: {
    validate(val, name) {
      if (val == "") return;
      this.canSubmit = true;
      switch (name) {
        case "account":
          if (!this.Util.isUserName(val)) {
            this.errMsg("label159");
            this.canSubmit = false;
          }
          break;
        case "tel":
          if (!this.Util.isPhone(val) && !this.Util.isEmail(val)) {
            this.errMsg("label156");
            this.canSubmit = false;
          }
          break;
        case "email":
          if (!this.Util.isPassword(val)) {
            this.errMsg("label124");
            this.canSubmit = false;
          }
          break;
        case "repassword":
          if (val != this.registerData.password) {
            this.errMsg("两次输入密码不一致");
            this.canSubmit = false;
          }
          break;
        case "verCode":
          if (val != this.verCodeStr) {
            this.errMsg("label126");
            this.canSubmit = false;
          }
          break;
      }
    },
    uploadId(id, e) {
      e.preventDefault();
      let file = e.target.files[0];
      let { name, size, type } = file;
      let formData = new FormData();
      let options = {
        headers: {
          "Content-Type": "MultipartFile/form-data"
        },
        method: "post"
      };
      if (!/\.(jpg|png)$/.test(name)) {
        this.$message.error("图片格式需为jpg或者png");
        return;
      }
      if (size > 4 * Math.pow(1024)) {
        this.$message.error(
          `图片大小不可超过4M,当前图片大小${size / Math.pow(1024, 2)}M`
        );
        return;
      }
      formData.append("imgurl", file);
      options.data = formData;
      switch (id) {
        case "1": // 传输身份证照片地址
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_1 = true;
          this.hideUploadBtn_1 = true;
          // axios(options).then(res => {
          axios.post(options.url,options.data, {
            }).then(res => {  
            console.log(res);
            
            this.showLoading_1 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.faceIdPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.idcard = data.url;
              });
              
            }
          });
          break;
        case "2": // 户口本护照地址
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_2 = true;
          this.hideUploadBtn_2 = true;
          axios(options).then(res => {
            console.log(res);

            this.showLoading_2 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.backIdPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.accountbook = data.url;
              });
            }
          });
          break;
        case "3": // 传输水电费地址
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_3 = true;
          this.hideUploadBtn_3 = true;
          axios(options).then(res => {
            this.showLoading_3 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.fullPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.utilityfee = data.url;
              });
            }
          });
          break;  
      }
    },
    getuserinfo() {
      this.request(this.api.getuserinfo).then(res => {
        if (res && res.code != "0") {
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
        this.infos = res.data[0];
        this.formData.username=res.data[0].username;
        // 存区号
        myStorage.set("username", this.infos.username);
      });
    },
    // 获取成为商户的抵押信息
    getmerchantservices(){
      return this.request(this.api.getmerchantservices,).then(res => {
        if (res.code == "0") {
          this.shopAplyInfo=res.data[0];
          this.shopCoin='冻结账户保证金'+res.data[0].number + res.data[0].coin;
        }else{
          this.errMsg(res.msg);
          return
        }
      });
    },
    // 申请信息提交
    Formaddmerchant(){
      // formData.tel
      return this.request(this.api.addmerchant,this.formData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "申请成功");
          this.checked=false; 
        }else{
          this.errMsg(res.msg);
          return
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding:0 0 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: $w-txtcor;padding:30px 0;text-align: center;
  h3{font-size: 30px;line-height: 36px;}
  p{font-size: 14px;color: #9aa5b5;line-height: 24x;margin-top: 15px;}
}
.main-container{min-height: 80vh;}
.progs{width: 900px;margin: 0 auto;}
// 内容部分 apform_box
.apform_box{
  .form_title{font-size: 24px;line-height: 30px;margin: 15px 0;}
  .basics{border-top: 1px solid #e5e5e5;margin-top: 50px;}
  .two_card{
    .card_img{
      position: relative;
      img{width: 230px;height: 145px;}
      .img_tips{
        position: absolute;
        width:230px;
        left: 0;
        bottom: 0;
        background: #098af7;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
      }
    }
    .upbox{
      width: 230px;
      height: 145px;
      // border:1px dashed #807f7f;
      .upload-zone {
          width: 295px;
          height: 145px;
          margin-top: 0px;
          border: 1px dashed #685A43;
          button {
            width: 60px;
            height: 60px;   
            margin: 0;
            opacity: 0.8;
            border-radius: 50%;
            background: url('../../assets/images/personalCenter/my_add.png')no-repeat center center;
            background-size: 100% 100%;
          }
      }
      .upload-input {
        opacity: 0;
        z-index: 999;
        height: 40px;
        cursor: pointer;
      }
      .image-preview {
          width: 100%;
          height: 100%;
          background-position: center center;
          background-repeat: no-repeat;
        }
    }
    .img_toptip{
      p{line-height: 30px;}
    }
  }
}


// btn
.btnbox{
  width: 400px;
  margin: 100px auto 0 auto;
  p{text-align: center;}
  button{margin-top: 30px;display: block;margin: 20px auto 0 auto;width: 200px;}
  .el-checkbox {margin: 0 auto;}
  em{color: #357ce1;}
}
.dress{width: 700px;}
.tips{
  p{color: #4f4f4f;font-size: 12px;line-height: 20px;}
}
.img_toptip{
  p{color: #4f4f4f;font-size: 14px;line-height: 24px;margin-bottom: 10px;}
}
.up_tips{
  margin-left: 50px !important;
  p{
    color: #4f4f4f;font-size: 12px;line-height: 20px;
  }
  em{color: #098af7;}
}
.hkb{margin-bottom: 30px;}
</style>
